<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="5"><div class="grid-content ">
            </div></el-col>
            <el-col :span="14">
                <div class="grid-content">
                    <el-col :span="12">
                        <el-button type="danger" disabled>疫情速报</el-button>
                    </el-col>
                    <el-col :span="12">
                        <el-select v-model="value" @change="news" placeholder="切换城市">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <br><br>
                    <ol>
                        <li v-for="items in newsData">
                            <el-link type="primary" :underline="false" style="font-size: 20px" :href="items.news_url">{{items.title}}</el-link>
                        </li>
                        <br><br>
                    </ol>
                </div>
            </el-col>
            <el-col :span="5"><div class="grid-content"></div></el-col>
        </el-row>

    </div>
</template>

<script>
    export default {
        name: "News",
        data(){
            return{
                newsData:[],
                options:[{value:'hb',label:'湖北'},{value: 'guizhou',label: '贵州'}
                        ,{value: 'gd',label: '广东'},{value: 'henan',label: '河南'}
                        ,{value: 'zj',label: '浙江'},{value: 'hn',label: '湖南'}
                        ,{value: 'ah',label: '安徽'},{value: 'jiangxi',label: '江西'}
                        ,{value: 'jiangsu',label: '江苏'},{value: 'cq',label: '重庆'}
                    ,{value: 'sd',label: '山东'},{value: 'cd',label: '四川'}
                    ,{value: 'heilongjiang',label: '黑龙江'},{value: 'bj',label: '北京'}
                    ,{value: 'sh',label: '上海'},{value: 'hebei',label: '河北'}
                    ,{value: 'fj',label: '福建'},{value: 'guangxi',label: '广西'}
                    ,{value: 'guizhou',label: '贵州'},{value: 'guizhou',label: '贵州'}
                    ],
                value:'hb',
                label:'湖北',
            }
        },

        created() {
          this.news();
        },

        methods:{
            test:function(value){
                console.log("test "+value)
            },
            news:function () {
                console.log(this.value)
                this.axios.get('http://127.0.0.1:8088/news', {params: {provinceCode:this.value}})
                    .then(res =>{
                        this.newsData = res.data.data.items;
                        console.log(JSON.stringify(res.data))
                    })
                    .catch(err =>{
                        throw new DOMException("发生错误"+err);
                    })
            },

        }
    }
</script>

<style scoped>

</style>